<template>
	<view class="home">
		<view class="devlist">
			<view class="item" @click="zhandian(i)" v-for="(i,index) in productList" :key="index">
				<image class="img" :src="i.productImage" mode=""></image>
				<view class="text">
					<view class="">
						{{i.productName}}
					</view>
					<view class="shuj">
						查看数据
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList:[],
				zdID:null
			}
		},
		onLoad(option) {
			this.zdID = option.id
			this.productListFn()
		},
		methods: {
			zhandian(i){
				uni.navigateTo({
					url: '/pages/home/zhanDian/deviceList?key=' + i.productKey + '&zdID=' + this.zdID
				});
			},
			// 设备类型列表
			productListFn(){
				uni.$u.http.get('/device/product/phoneList').then(res => {
					if (res.code == 200) {
						this.productList = res.rows
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.home {
		.devlist{
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			.item{
				width: 280rpx;
				padding: 30rpx;
				border-radius: 20rpx;
				text-align: center;
				margin-top:20rpx ;
				// display: flex;
				// justify-content: space-around;
				// align-items: center;
				background-color: #efefef;
				// box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, 0.2);
				.img{
					width: 120rpx;
					height: 120rpx;
				}
				.text{
					color: #253e78;
					font-size: 40rpx;
					.shuj {
						font-size: 35rpx;
						color: #838383;
					}
				}
			}
		}
	}

	
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>